<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加商品成功</title>
    <script src="/static/index/js/vue.js"></script>
    <script src="/static/index/js/moment.min.js"></script>
    <script src="/static/antd/dist/antd.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/antd.css">
    <script src="/static/antd/dist/jquery.js"></script>
    <link rel="stylesheet" href="/static/antd/dist/myLogos.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/style.css">
    <link rel="stylesheet" href="/static/antd/dist/footer/bootstrap.css">
</head>
<body>
    <div id="app" style="min-width: 1332px;">
        <!-- 顶部 -->
        <div style="position: fixed; width: 100%; z-index: 999;top: 0;">
            <a-collapse>
                <a-collapse-panel style="font-size: 2rem; text-align: center" key="1"
                                  th:header="${session.loginUser==null?'请登录':session.loginUser.nickname}">
                    <a style="padding-left: 25px; color: cadetblue;" href="http://auth.shushan.com/login.html"
                       th:if="${session.loginUser==null}">登录</a>
                    <div style="width: 50%; margin: 25px auto">
                        <a-button @click="cart" type="primary" style="width: 100%;">
                            购物车
                        </a-button>
                    </div>
                    <div style="width: 50%; margin: 0 auto">
                        <a-input-search
                                v-model="keywordInput"
                                placeholder="请输入关键字"
                                enter-button="搜索"
                                size="large"
                                @search="onSearch"></a-input-search>
                    </div>
                    <br/>
                    {{keywordInput}}
                </a-collapse-panel>
            </a-collapse>
        </div>

        <!-- 中间添加成功消息 -->
        <div
                style="margin-top: 100px;
                 margin-bottom: 50px;
                  display: flex;
                  justify-content: center;
                   align-items: center;
        ">
            <a-card
                hoverable
                style="width: 420px; height: 630px; display: flex; justify-content: center; align-items: center;"
            >
                <a-icon type="check-circle" theme="twoTone" two-tone-color="#52c41a"></a-icon>
                <span>商品添加成功</span>
                <a-card
                        hoverable
                        style="width: 240px;margin-top: 5px;"
                        th:if="${item!=null}"
                        th:href="'http://item.shushan.com/'+${item.skuId}+'.html'"
                >
                    <img
                            slot="cover"
                            alt="example"
                            th:src="${item.image}"
                    />
                    <a-toolTip th:title="${item.title}">
                        <a-card-meta th:title="${item.title}">
                            <template slot="description" th:text="'数量：'+${item.count}">
                                www.instagram.com
                            </template>
                        </a-card-meta>
                    </a-toolTip>
                </a-card>

                <a-button style="margin-top: 20px;" block type="default"  th:href="'http://item.shushan.com/'+${item.skuId}+'.html'">
                    查看商品详情
                </a-button>
                <a-button style="margin-top: 20px;" block type="danger"  th:href="'http://cart.shushan.com/cart.html'">
                    去购物车结算
                </a-button>
                <div th:if="${item==null}" class="mc success-cont">
                    <h2>购物车中无商品</h2>
                    <a href="http://shushan.com">转到首页</a>
                </div>
            </a-card>
        </div>

        <!-- 底部 -->
        <div class="mkl_footer"
             style="background-image: url('https://img.zcool.cn/community/01431c598be9d60000002129c119f6.jpg@1280w_1l_2o_100sh.jpg')">
            <div class="sub-footer" style="background: rgba(8 ,10 ,12, 0.8);">
                <div class="container">
                    <div class="mkls_footer_grid">
                        <div class="col-xs-4 mkls_footer_grid_left">
                            <h4>地址:</h4>
                            <p>贵州省贵阳市清镇市,
                                <br> 云岭东路</p>
                        </div>
                        <div class="col-xs-4 mkls_footer_grid_left">
                            <h4>联系</h4>
                            <p>
                                <span>电话 : </span>182 xxxx 8687</p>
                            <p>
                                <span>邮箱 : </span>
                                <a href="#" style="color: #1890ff;">m182xxxx8687@163.com</a>
                            </p>
                        </div>
                        <div class="col-xs-4 mkls_footer_grid_left">
                            <h4>营业时间:</h4>
                            <p>全天候</p>
                            <p>每周五维护
                                <span>(数据服务)</span>
                            </p>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="footer-copy-right">
                <div class="container">
                    <div class="allah-copy">
                        <p>Copyright &copy; 2021.书山 <a href="http://shushan.com" target="_blank"></a></p>
                    </div>
                    <div class="footercopy-social">
                        <ul>
                            <li>
                                <a href="#">
                                    <span class="fa fa-facebook"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-twitter"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-rss"></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="fa fa-vk"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <!-- 底部锚点 -->
        <div>
            <a-back-top></a-back-top>
        </div>
        <!-- 返回详情按钮 -->
        <div style="position:fixed; top: 5px; right: 5px;">
            <a-affix :offset-top="top">
                <a-button th:href="'http://item.shushan.com/'+${item.skuId}+'.html'" type="primary">
                    返回详情
                </a-button>
            </a-affix>
        </div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    keywordInput: "",
                    top: 50,
                }
            },
            methods: {
                onSearch() {
                    // window.location.href="http://search.shushan.com/list.html?keyword="+keyword;
                    location.href = "http://search.shushan.com/list.html?keyword="+this.keywordInput
                    // console.log('搜索值',value);
                },
                cart() {
                    window.location.href = "http://cart.shushan.com/cart.html";
                },
            }
        })
    </script>
</body>
</html>